<template>
  <!-- 结束活动页面
    -->
  <view>
    <view class="signup" v-for="(end, index) in endedList" :key="index">
      <view class="title">
        <text>{{ end.title }}</text>
      </view>
      <view class="Simg">
        <image :src="end.image" mode="widthFix" />
      </view>
      <view class="detail">
        <view class="detail-com"> </view>
        <view class="detail-bot">
          <view class="bot">
            <text class="bot-text">已结束</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { EndedItem } from '@/types/index/home'
import { baseImgUrl } from "@/utils/http";
const endedList = ref<EndedItem[]>([
  {
    id: 1,
    title: '单身青年联谊活动',
    image: baseImgUrl + '/static/image/static/ended.png',
  },
])
</script>

<style scoped>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 32rpx;
  color: #221815;
  line-height: 67rpx;
}

.signup .Simg image {
  border-radius: 3%;
  margin-top: 4%;
}

.detail-com {
  display: flex;
  justify-content: space-between;
}

.detail-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.bot {
  width: 22%;
  border-radius: 15%;
  background-color: #aaaaaa;
}

.bot-text {
  width: 80rpx;
  height: 26rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 58rpx;
  margin-left: 15%;
}
</style>
